<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面关键字搜索</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        .form-pad {
            padding-bottom: 10px;
        }

        .resp {
            padding-top: 10px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">关键字搜索</a>
        </div>
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="jumbotron">
        <h1>欢迎</h1>
        <p>希望您能愉快方便的使用页面关键字搜索</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">更多</a></p>
    </div>

    <div class="row form-pad">
        <div class="col-md-6">
            <div class="input-group">
            <span class="input-group-addon"
                  id="basic-addon1">第二页的网页地址</span>
                <input type="text" class="form-control url1"
                       aria-describedby="basic-addon1"
                       placeholder="http://www.deyi.com/forum-912-2.html">
            </div>
        </div>

        <div class="col-md-6">
            <div class="input-group">
            <span class="input-group-addon"
                  id="basic-addon1">第三页的网页地址</span>
                <input type="text" class="form-control url2"
                       aria-describedby="basic-addon1"
                       placeholder="http://www.deyi.com/forum-912-3.html">
            </div>
        </div>
    </div>

    <div class="row form-pad">
        <div class="col-md-6">
            <div class="input-group">
            <span class="input-group-addon"
                  id="basic-addon1">从多少页？</span>
                <input type="text" class="form-control start_page"
                       aria-describedby="basic-addon1" placeholder="默认第一页">
            </div>
        </div>


        <div class="col-md-6">
            <div class="input-group">
            <span class="input-group-addon"
                  id="basic-addon1">到多少页？</span>
                <input type="text" class="form-control end_page"
                       aria-describedby="basic-addon1" placeholder="默认第二页">
            </div>
        </div>
    </div>

    <div class="row form-pad">
        <div class="col-md-12">
            <div class="input-group">
            <span class="input-group-addon"
                  id="basic-addon1">搜索的关键字？</span>
                <input type="text" class="form-control keyword"
                       aria-describedby="basic-addon1" placeholder="新闻">
            </div>
        </div>
    </div>

    <div class="row form-pad">
        <div class="col-md-6">
            <button type="button" class="btn btn-primary btn-lg start_search">
                开始搜索
            </button>
        </div>
    </div>


    <div class="panel panel-success">
        <div class="panel-heading">搜索结果</div>
        <div class="panel-body">
            <div class="row form-pad list-group">
                <div class="col-md-10 resp">
                    暂无数据
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        $(".start_search").click(function () {
            url1 = $('.url1').val();
            url2 = $('.url2').val();
            keyword = $('.keyword').val();
            start_page = $('.start_page').val();
            end_page = $('.end_page').val();

            $('.resp').html("搜索中，请稍后......");
            $.ajax({
                url: "/search",
                type: "POST",
                data: {
                    "url1": url1,
                    "url2": url2,
                    "keyword": keyword,
                    "start_page": start_page,
                    "end_page": end_page,
                },
                dataType: 'json',
            }).done(function (res) {
                $('.resp').html("");

                if (res == null) {
                    $('.resp').append("暂无数据")
                } else {
                    if ("error_code" in res) {
                        $('.resp').append(res["error_msg"])
                    } else {
                        for (var i = 0; i < res.length; i++) {
                            n = i + 1;
                            resData = "<a class='list-group-item' href='" + res[i]["url"] + "' target='_blank'>" + n + ". " + res[i]["title"] + "</a>";
                            $('.resp').append(resData)
                        }
                    }
                }
            });

        });
    });
</script>
</body>
</html>